<template>

  <!--
    	作者：luoyiming
    	时间：2020-04-26
    	描述：门店-添加门店
    -->
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="80px">
      <!--添加门店-->
      <div class="common-form">新增門市</div>

      <el-form-item
        label="門市名稱"
        prop="storeName"
        :rules="[{ required: true, message: ' ' }]"
      >
        <el-input
          v-model="form.storeName"
          placeholder="請輸入門市名稱"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item label="門市Logo">
        <el-row>
          <el-button icon="Picture" @click="openUpload">選擇圖片</el-button>
          <div v-if="form.logoImageId != ''" class="img">
            <img :src="filePath" width="100" height="100" />
          </div>
        </el-row>
        <div class="gray9">建議圖片尺寸為150x150</div>
      </el-form-item>
      <el-form-item
        label="聯絡人"
        prop="linkman"
        :rules="[{ required: true, message: ' ' }]"
      >
        <el-input
          v-model="form.linkman"
          placeholder="請輸入門市聯絡人"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="聯絡電話"
        prop="phone"
        :rules="[{ required: true, message: ' ' }]"
      >
        <el-input
          v-model="form.phone"
          placeholder="請輸入門市聯絡電話"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="營業時間"
        prop="shopHours"
        :rules="[{ required: true, message: ' ' }]"
      >
        <el-input
          v-model="form.shopHours"
          placeholder="請輸入營業時間，例如：8:30-17:30"
          class="max-w460"
        ></el-input>
      </el-form-item>

      <el-form-item
        label="門市區域"
        prop="provinceId"
        :rules="[{ required: true, message: ' ' }]"
      >
        <el-select
          v-model="form.provinceId"
          placeholder="縣市"
          @change="initCity"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in areaList"
            :key="index"
          ></el-option>
        </el-select>
        <el-select
          v-if="form.provinceId != ''"
          v-model="form.cityId"
          placeholder="區域"
          @change="initRegion"
        >
          <el-option
            :label="item1.name"
            :value="item1.id"
            v-for="(item1, index1) in cityList"
            :key="index1"
          ></el-option>
        </el-select>
        <el-select
          v-if="form.cityId != ''"
          v-model="form.regionId"
          placeholder="鄉鎮市區"
        >
          <el-option
            :label="item2.name"
            :value="item2.id"
            v-for="(item2, index2) in regionList"
            :key="index2"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="詳細地址"
        prop="address"
        :rules="[{ required: true, message: ' ' }]"
      >
        <el-input
          v-model="form.address"
          placeholder="請輸入詳細地址"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="門市座標"
        prop="coordinate"
        :rules="[{ required: true, message: ' ' }]"
      >
        <div class="d-s-c d-r">
          <el-button v-if="txKey" icon="LocationInformation" @click="mapClick()"
            >選擇經緯度</el-button
          >
          <div class="d-s-c">
            <div class="ml10"></div>
            <div class="max-w460">
              <el-input v-model="form.coordinate"></el-input>
            </div>
          </div>
          <div>
            <a href="https://lbs.qq.com/getPoint/" target="_blank"
              >騰訊地圖座標獲取</a
            >
          </div>
        </div>
        <div class="tips" style="color: red">未申請騰訊地圖金鑰，請直接在騰訊地圖搜尋地址取得經緯度，範例：40.002749,116.323467</div>
      </el-form-item>
      <!-- <el-form-item label="门店坐标">
        <el-row class="mb16">
          <el-col :span="24">
            <el-input v-model="form.coordinate" class="max-w460"></el-input>
          </el-col>
        </el-row>
        <el-row class="mb16">
          <el-col :span="24">
            <Getpoint :form="form" @getMapdata="getMapdataFunc" @chose="choseFunc"></Getpoint>
          </el-col>
        </el-row>
      </el-form-item> -->
      <el-form-item label="門市簡介">
        <el-input
          type="textarea"
          v-model="form.summary"
          placeholder="請輸入門市簡介"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item label="門市排序">
        <el-input
          type="number"
          v-model="form.sort"
          placeholder="請輸入門市排序"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item label="自取核銷">
        <el-radio-group v-model="form.isCheck">
          <el-radio :label="1">支援</el-radio>
          <el-radio :label="0">不支援</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="門市狀態">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">啟用</el-radio>
          <el-radio :label="0">停用</el-radio>
        </el-radio-group>
      </el-form-item>

      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="onSubmit"
          :loading="loading"
          >提交</el-button
        >
      </div>
    </el-form>
    <!--上传图片组件-->
    <Upload
      v-if="isupload"
      :isupload="isupload"
      :type="type"
      @returnImgs="returnImgsFunc"
      >上傳圖片</Upload
    >
    <!--地图组件-->
    <Map
      :open="open_map"
      :mapData="mapData"
      :txKey="txKey"
      @close="closeDialogFunc($event, 'map')"
    ></Map>
  </div>
</template>

<script>
// import Getpoint from '@/components/map/Getpoint.vue';
import StoreApi from "@/api/store.js";
import DataApi from "@/api/data.js";
import Upload from "@/components/file/Upload.vue";
import Map from "./dialog/Map.vue";
export default {
  components: {
    /*腾讯地图拾取器*/
    // Getpoint,
    Upload,
    Map
  },
  data() {
    return {
      /*form表单数据*/
      form: {
        storeName: "",
        logoImageId: 0,
        linkman: "",
        phone: "",
        shopHours: "",
        provinceId: "",
        cityId: "",
        regionId: "",
        address: "",
        coordinate: "",
        summary: "",
        sort: 1,
        isCheck: 1,
        status: 1,
        is_search_map: false
      },
      filePath: "",
      /*省市区*/
      areaList: [],
      /*是否上传图片*/
      isupload: false,
      loading: false,
      open_map: false,
      mapData: {},
      txKey: ""
    };
  },
  created() {
    this.getData();
    this.getMapData();
  },
  watch: {
    "form.provinceId": function (n, o) {
      if (n != o) {
        this.areaList.forEach((item, index) => {
          if (item.id == n) {
            this.cityList = item.children;
          }
        });
      }
    },
    "form.cityId": function (n, o) {
      if (n != o) {
        this.cityList.forEach((item, index) => {
          if (item.id == n) {
            console.log(item);
            this.regionList = item.children;
          }
        });
      }
    }
  },
  methods: {
    getMapData() {
      let self = this;
      StoreApi.getMapKey({}, true).then(res => {
        self.txKey = res.data.txKey;
      }).catch(error => {});
    },
    /*打开地图*/
    mapClick() {
      this.mapData.coordinate = this.form.coordinate;
      this.mapData.address = this.form.address;
      this.open_map = true;
    },
    /*关闭获取用户弹窗*/
    closeDialogFunc(e, f) {
      if (f == "map") {
        if (e && e.type != "error" && e.params.coordinate) {
          this.form.address = e.params.address;
          this.form.coordinate = e.params.coordinate;
        }
        this.open_map = false;
      }
    },
    getData() {
      let self = this;
      DataApi.getRegion({}, true).then(res => {
        self.areaList = res.data;
      }).catch(error => {});
    },
    /*添加用户*/
    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate(valid => {
        if (valid) {
          if (form.provinceId == 0 || form.provinceId == "" || form.cityId == 0 || form.cityId == "" || form.regionId == 0 || form.regionId == "") {
            ElMessage({
              message: "請選擇完整縣市區",
              type: "error"
            });
            return;
          }
          self.loading = true;
          StoreApi.addShop(form, true).then(data => {
            self.loading = false;
            if (data.code == 1) {
              ElMessage({
                message: "恭喜您，新增成功",
                type: "success"
              });
              self.$router.push("/store/store/index");
            } else {
              self.loading = false;
            }
          }).catch(error => {
            self.loading = false;
          });
        }
      });
    },
    /*初始化城市id*/
    initCity() {
      this.form.cityId = "";
    },
    /*初始化区id*/
    initRegion() {
      this.form.regionId = "";
    },
    /*获取经纬度*/
    getMapdataFunc(e) {
      this.form.coordinate = e.data[0].toFixed(6) + "," + e.data[1].toFixed(6);
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        this.filePath = e[0].filePath;
        this.form.logoImageId = e[0].fileId;
      }
      this.isupload = false;
    },
    /*选择的地址*/
    choseFunc(e) {
      this.form.coordinate = e.location.lat + "," + e.location.lng;
      this.form.address = e.address;
    },
    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.basic-setting-content {
}

.product-add {
  padding-bottom: 50px;
}

.img {
  margin-top: 10px;
}
</style>

